<template>
  <div>
    <div class="box_footer">
      <div class="about1">
        <div class="left">产品</div>
        <img src="../assets/img/zkccc.png" alt="" />
      </div>
      <div class="about2" @click="toabout">
        <div class="left">了解子弹</div>
        <img src="../assets/img/zkccc.png" alt="" />
      </div>
      <div class="about3">
        <div class="cabout3">
          <div>电话咨询</div>
          <div @click="callPhone">
            <img
              style="width: 0.3125rem; height: 0.3125rem; margin-bottom: -0.0625rem"
              src="../assets/img/phone.png"
              alt=""
            />
            159 5092 7000
          </div>
        </div>
      </div>
      <div class="about4">
        <div class="left">
          <div>关注子弹人力云工众号</div>
          <div class="fs24" style="color: #ffffff">长按截图保存二维码</div>
        </div>
        <img
          @touchstart="touchStart"
          @touchend="touchEnd"
          src="../assets/img/ewmccc.png"
          alt="二维码"
        />
      </div>
    </div>
    <div class="free">
      <div class="btn02" @click="showfree">免费试用</div>
    </div>
    <el-dialog title="扫码免费试用" :visible.sync="visible" width="60%" center>
      <div style="text-align: center">
        <img
          style="width: 1.25rem; height: 1.25rem"
          src="../assets/img/print.png"
          alt=""
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qrcodeUrl64: "",
      timer: "",
      visible: false,
    };
  },
  methods: {
    showfree() {
      this.visible = true;
    },
    toabout() {
      this.$router.push("/m/m-sass-about");
    },
    callPhone() {
      window.location.href = "tel://" + "15950927000";
    },
    touchEnd() {
      //手指离开
      clearTimeout(this.timer);
    },
    touchStart() {
      //手指触摸
      clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = setTimeout(() => {
        this.downloadIamge(this.qrcodeUrl64, "pic");
      }, 1000);
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
  },
};
</script>
<style scoped lang="scss">
.userforfree {
  width: 1.875rem;
  height: 1.875rem;
  text-align: center;
  line-height: 1.875rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  font-size: 0.2rem;
  img {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.box_footer {
  background-color: #101b2d;
  padding: 0.125rem;
}
.about1,
.about2 {
  padding: 40px 40px 45px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    font-size: 28px;
    color: #ffffff;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
.about3 {
  padding: 40px 0 60px;
  .cabout3 {
    background-color: #3e5ff5;
    padding: 20px 40px;
    font-size: 28px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.about4 {
  padding: 0 0 0 40px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: calc(100% - 0.36rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 24px;
    color: #ffffff;
    div {
      margin-bottom: 28px;
    }
  }
  img {
    width: 182px;
    height: 182px;
  }
}
.free {
  padding: 11px 30px;
  .btn02 {
    background-color: #3e5ff5;
    border-radius: 44px;
    height: 88px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    font-size: 32px;
  }
}
.fs24 {
  font-size: 24px;
}
</style>
